@import "open-color/open-color.scss";
@import "./variables.module.scss";

.drawnix {
  --focus-highlight-color: #{$oc-blue-2};
  --icon-fill-color: var(--color-on-surface);
  --island-bg-color: #ffffff;
  --island-border-color: #eeeeee;
  --keybinding-color: var(--color-gray-40);
  --shadow-island: 0 0 16px #00000014;
  --dialog-border-color: var(--color-gray-20);
  --button-hover-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
  --link-color: var(--color-primary);
  --default-button-size: 2rem;
  --default-icon-size: 1rem;
  --lg-button-size: 2.25rem;
  --lg-icon-size: 1.125rem;
  --xlg-icon-size: 1.25rem;
  --popup-label-size: 1.25rem;
  --editor-container-padding: 1rem;

  @media screen and (min-device-width: 1921px) {
    --lg-button-size: 2.5rem;
    --lg-icon-size: 1.25rem;
    --default-button-size: 2.25rem;
    --default-icon-size: 1.25rem;
  }

  --space-factor: 0.25rem;
  --text-primary-color: var(--color-on-surface);

  --color-icon-white: #{$oc-white};

  --color-primary: #6698ff;
  --color-primary-darker: #4a7ee6;    // 降低亮度和饱和度
  --color-primary-darkest: #3366cc;   // 进一步降低亮度
  --color-primary-light: #e6f0ff;     // 提高亮度，降低饱和度
  --color-primary-light-darker: #cce0ff;  // light 的稍暗版本
  --color-primary-hover: #80acff;     // 略微提高亮度的互动状态

  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
  --default-border-color: var(--color-surface-high);

  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;
  --color-gray-85: #242424;
  --color-gray-90: #1e1e1e;
  --color-gray-100: #121212;

  --color-disabled: var(--color-gray-40);

  --color-promo: var(--color-primary);
  --color-success: #268029;
  --color-success-lighter: #cafccc;

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --color-surface-high: hsl(220, 100%, 97%);
  --color-surface-mid: hsl(220 25% 96%);
  --color-surface-low: hsl(220 25% 94%);
  --color-surface-lowest: #ffffff;
  --color-on-surface: #666666;
  --color-brand-hover: #6698ff;
  --color-on-primary-container: #6698ff;
  --color-surface-primary-container: rgba(102, 152, 255, .1);
  --color-brand-active: #6698ff;
  --color-border-outline: #767680;
  --color-border-outline-variant: #c5c5d0;

  --default-border-color: var(--color-surface-high);
}
